<!--
 * @Description: 下拉加载
 * @Author: zheng yiliang
 * @Date: 2021-05-04 13:37:36
 * @LastEditTime: 2021-05-09 21:39:05
 * @LastEditors: zheng yiliang
-->

<template >
  <div class="loading" v-if="loading">
    <div v-if="status === '0'">{{ content }}<span class="dot">...</span></div>
    <!-- <div v-if="!isEnd">{{ content }}</div> -->
    <div v-else-if="status === '1'">
      <span @click="$emit('refresh')"
        ><i class="el-icon-refresh-right"></i>加载失败，请刷新重试</span
      >
    </div>
    <div v-else>--- 我也是有底线的 ---</div>
  </div>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    content: {
      type: String,
      default: '正在加载中'
    },
    status: {
      // 0 正常加载中 1 加载失败 2 加载完成
      type: String,
      default: '0'
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.loading {
  color: #999;
  font-size: 16px;
  text-align: center;
  margin: 10px 0px 10px 0px;
  .dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -0.25em;
    overflow: hidden;
  }

  .dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
  }

  @keyframes dot {
    33% {
      transform: translateY(-2em);
    }
    66% {
      transform: translateY(-1em);
    }
  }
}
</style>
